<template>
  <view class='searchRes_page' :style='{paddingTop:head_height+"px"}'>
    <!-- 搜索结果页 -->
    <view class='searchRes_head'>
      <view class='select_box' :class='{select_show:select_show}'>
        <view class='select_item'>
          <!-- 是否折叠 -->
          <!-- <picker :range="arr1" @change='getpickerData($event,0)'>
            <view class='item'>
              <view>{{arr1[arr1_index]}}</view>
              <text class='iconfont icon-jiantou-copy-copy'></text>
            </view>
          </picker> -->
          <!-- 标题、正文 -->
          <picker :value='arr2_index' :range="arr2" @change='getpickerData($event,1)'>
            <view class='item'>
              <view>{{arr2[arr2_index]}}</view>
              <text class='iconfont icon-jiantou-copy-copy'></text>
            </view>
          </picker>
          <!-- 信源 -->
            <view class='item' @tap='openPopup'>
              <view class='source_text'>{{source}}</view>
              <text class='iconfont icon-jiantou-copy-copy'></text>
            </view>
          <!-- </picker> -->
          <!-- 时间 -->
          <!-- <view class='item'>
            <view>今日</view>
            <text class='iconfont icon-jiantou-copy-copy'></text>
          </view> -->
        </view>
        <view class='input_box'>
          <!-- 日期 -->
          <view class='input_view'>
            <view class='title'>日期:</view>
            <view class='time_box'>
            <view :class='{on1:date_index == 0}' @tap='selectDate(0)'>
              今日
              <view class='close_btn' v-if='date_index == 0'>
                <view></view>
                <text class='iconfont icon-guanbi'></text>
              </view>
            </view>
            <view class='select_date' :class='{on1:date_index == 1}' @tap='selectDate(1)'>
              {{date_arr.length == 0?"自定义":date_arr[0].slice(0,10)+" 至 "+date_arr[1].slice(0,10)}}
              <view class='close_btn' v-if='date_index == 1'>
                <view></view>
                <text class='iconfont icon-guanbi'></text>
              </view>
            </view>
          </view>
          </view>
          <!-- 过滤词 -->
          <view class='input_view'>
            <view class='title'>过滤词:</view>
            <view class='input_item'>
              <input 
                type="text" 
                placeholder="请输入过滤词，用+连接表示且关系" 
                v-model="form_data.noKeyword"
                @confirm='initListData'>
            </view>
          </view>
          <!-- 指定域名 -->
          <view class='input_view'>
            <view class='title'>指定域名:</view>
            <view class='input_item'>
              <input 
                type="text" 
                placeholder="请输入域名" 
                v-model="form_data.domain"
                @confirm='initListData'>
            </view>
          </view>
        </view>
        <!-- <view class='select_item'>
          <view class='item'>
            <view>排除关键词</view>
            <text class='iconfont icon-jiantou-copy-copy'></text>
          </view>
          <view class='item'>
            <view>指定信源</view>
            <text class='iconfont icon-jiantou-copy-copy'></text>
          </view>
        </view> -->
      </view>

      <scroll-view class='tab_box' scroll-x='true' :scroll-left='scroll_left'>
        <view
        class='item' 
        :class='{tabBar_on:headTab_index == 0}'
        @tap='switchTab(0)'>
        <view class='item0'>全部</view></view>
        <view
        class='item' 
        :class='{tabBar_on:headTab_index == tab_index+1}'
        v-for='(tab_item,tab_index) in tab' :key='tab_index'
        @tap='switchTab(tab_index+1)'>
        <view :class='"item"+tab_index+1'>{{convert(tab_item)}}</view></view>
      </scroll-view>
    </view>

    <loading :status='load_status'></loading>
    <!-- 文章列表 -->
    <view
      @touchstart='touchStart' 
      @touchmove='touchMove'
      @touchend='touchEnd'>
      <list2 :list='list'></list2>
    </view>

    <hint :status='hint_status'></hint>

    <!-- 日期选择器 -->
    <datepicker 
      :show='picker_show'
      @confirm='confirmDate'
      @cancel='closePicker'></datepicker>
    
    <!-- 信源选择器 -->
    <popup ref='set_popup'>
      <view class='hotList_set'>
        <view class='set_title'>信源</view>
        <view class='set_list'>
          <view class='selected_list'>
            <view  v-for='(option,i) in source_list' :key='i' @tap='selectOption(option,i)'>
              <view :class='{on1: option.is_show}'>
                {{option.option}}
                <view class='close_btn' v-if='option.is_show'>
                  <view></view>
                  <text class='iconfont icon-guanbi'></text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class='btn_box'>
          <button class='btn' @tap='closePopup'>取消</button>
          <button class='btn' @tap='confirmSource'>确定</button>
        </view>
      </view>
    </popup>

    <!-- 长按文章的扩展功能 -->
		<article-extend></article-extend>
  </view>
</template>

<script>

  import list2 from '@/pages/index/components/list2.vue'
  import datepicker from '@/pages/common/datepicker.vue'

  export default {
    components: {
      list2,
      datepicker
    },
    data() {
      return {
        convert: this.$convert,
        tab: this.$store.state.search_formData.siteTypes,
        headTab_index: 0,
        head_height: 0,
        select_show: false,
        start_y: 0,
        start_x: 0,
        move_x: 0,
        move_y: 0,
        scroll_left: 0,

        arr1: ["相似折叠","OCR识别"],
        arr1_index: 0,
        arr2: ["标题和正文","标题","正文"],
        arr2_index: this.$store.state.search_formData.matchMode-1,
        
        source: "全部信源",
        source_list: this.$store.state.source_list,
        source_index: [],
        date_index: this.$store.state.date_index,
        date_arr: [this.$store.state.search_formData.startTime,this.$store.state.search_formData.endTime],
        picker_show: false,
        form_data: this.$store.state.search_formData,
        list: [],
        total: 0,

        load_status: 0,
        hint_status: 0,
      }
    },
    computed: {
      nav_height() {
        return this.$store.state.nav_height;
      },
    },
    watch: {
      select_show() {
        setTimeout(() => {
          this.computeHeadHeight()
        },500)
      },
    },
    onReady() {
      this.computeHeadHeight();
      this.initListData();
      this.changeSource(); 
      if(this.date_index == 0) {
        this.date_arr = [];
      }
      // #ifdef  APP-PLUS
        let webView = this.$mp.page.$getAppWebview();
        webView.setTitleNViewSearchInputText(this.form_data.keyword);
      // #endif
    },
    // 搜索关键字
    onNavigationBarSearchInputConfirmed(e) {
      if(e.text == "") {
        uni.showToast({
            title: '请输入关键字',
            icon: 'none'
          });
        return
      }
      this.form_data.keyword = e.text;
      this.initListData();
    },
    // 点击展开筛选条件按钮
    onNavigationBarButtonTap(e){
      if(e.float == "right") {
        this.select_show = !this.select_show;
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.initListData()
    },
    // 触底
		onReachBottom() {
			if(this.list.length >= this.total) {
        this.hint_status = 2;
        return
      }
      this.page++;
      this.getListData();
		},
    methods: {
      // 获取列表数据
      getListData(type="") {
        this.hint_status = 1;
        this.$http({
          url: this.$api.search_res,
          data: this.form_data
        }).then( res => {
          if(res.code == 0) {
            this.hint_status = 2;
            if(type == "down") {
              this.list = [];
              this.load_status = 2;
              uni.stopPullDownRefresh();
            }
            this.total = res.data.total;
            if(res.data.total != 0) {
              res.data.list.forEach(val => {
                  val.img_num = 3;
                  this.list.push(val)
              });
            }else {
              this.hint_status = 0;
            }
          }
        })
      },
      // 重新获取数据
      initListData() {
        this.load_status = 1;
        this.page = 1;
        this.getListData("down");
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      // 切换tab
      switchTab(index) {
        this.headTab_index = index;
        if(index == 0) {
          this.form_data.siteTypes = this.tab
        }else {
          let arr = [];
          arr.push(this.tab[index-1])
          this.form_data.siteTypes = arr;
        }
        this.initListData();
      },
      // 获取选择器选择的结果
      getpickerData(e,index) {
        switch(index) {
          case 0:
            this.arr1_index = e.detail.value;
          break;
          case 1:
            this.arr2_index = e.detail.value;
            this.$store.state.search_formData.matchMode = e.detail.value+1;
            this.initListData();
          break;
          case 2:
            this.arr3_index = e.detail.value;
          break;
        }
      },
      // 选择日期
      selectDate(index) {
        if(index == 1) {
          // 打开日历
          if(this.date_arr.length == 0) {
            this.picker_show = true;
          }else {
            if(this.date_index == index) {
              this.picker_show = true;
            }else {
              this.form_data.startTime = this.date_arr[0];
              this.form_data.endTime = this.date_arr[1];
              this.initListData();
            }
          }
        }else {
          // 今日
          let today = new Date()/1000;
          let start_time = this.$time(today,"YY-MM-DD") +" "+ "00:00:00";
          let end_time = this.$time(today);
          this.form_data.startTime = start_time;
          this.form_data.endTime = end_time;
          this.initListData();
        }
        this.date_index = index;
      },
      // 确定日期范围
      confirmDate(e) {
        let today = new Date(new Date().toLocaleDateString()).getTime();
        let last_day = new Date(new Date(e.date[1]).toLocaleDateString()).getTime();
        if(today < last_day) {
          uni.showToast({
            title: '日期范围不能大于今天',
            icon: 'none'
          });
          return
        }

        e.value.forEach((val,i) => {
          let date = val.replace(/\//g, '-');
          if(i == 1) {
            let today = this.$time(new Date()/1000,"DD");
            let lastDay = date.slice(8,10);
            if(today == lastDay) {
              date = date + " " + this.$time(new Date()/1000,"hh:mm:ss")
            }else {
              date = date + " " + "23:59:59"
            }
          }else {
              date = date + " " + "00:00:00"
          }
            this.date_arr[i] = date
        });
        this.form_data.startTime = this.date_arr[0];
        this.form_data.endTime = this.date_arr[1];
        this.picker_show = false;
        this.initListData();
      },
      // 关闭日期选择器
      closePicker() {
        this.picker_show = false;
      },
      // 选择信源
      selectOption(option,i) {
        if(i == 0) {
          this.source_list.forEach((val,index) => {
            val.is_show = false;
          })
          option.is_show = true;
        }else {
          this.source_list[0].is_show = false;
          option.is_show ? option.is_show = false : option.is_show = true;
        }
        let on_arr = [];
        let all_arr = [];
        this.source_list.forEach((val,i) => {
          if(i != 0) {
            all_arr.push(val.name)
            if(val.is_show) {
              on_arr.push(val.name)
            }
          }
        })
        if(on_arr.length == 0 || on_arr.length == this.source_list.length-1) {
          this.source_list[0].is_show = true;
          on_arr = all_arr
        }
        this.source_index = on_arr;
      },
      // 确定信源
      confirmSource() {
        this.form_data.siteTypes = this.source_index;
        this.tab = this.source_index;
        this.headTab_index = 0;
        this.changeSource();
        this.$refs.set_popup.close();
        this.initListData()
      },
      // 信源显示
      changeSource() {
        this.source = "";
        this.source_list.forEach( (val,i) => {
            if(i == 0 && val.is_show) {
              this.source = "全部信源";
            }else {
              if(val.is_show) {
                this.source = this.source + "/" + val.option;
              }
            }
        });
        if(this.source.indexOf("全部信源") == -1) {
          this.source = this.source.slice(1,this.source.length);
        }else {
          this.source = "全部信源";
        }
        console.log(this.source)
      },
      // 打开选择信源
      openPopup() {
        this.$refs.set_popup.show();
      },
      // 取消选择信源
      closePopup() {
          this.$refs.set_popup.close();
          this.source_list.forEach(val => {
            val.is_show = false;
            this.tab.forEach( name => {
              if(val.name == name) {
                val.is_show = true;
              }
            })
          })
          if(this.source_list.length == this.tab.length) {
            this.source_list[0].is_show = true;
          }
      },
      // 按下
      touchStart(e) {
        // console.log(e)
        this.start_y = e.changedTouches[0].pageY;
        this.start_x = e.changedTouches[0].pageX;
      },
      // 移动
      touchMove(e) {
        let y = e.changedTouches[0].pageY - this.start_y;
        this.move_x = e.changedTouches[0].pageX - this.start_x;
        this.move_y = Math.abs(y);
        if(Math.abs(y) > 30) {
          this.select_show = false
        }
      },
      // 抬起
      touchEnd() {
        if(this.move_x > 100 && this.move_y <50) {
          this.headTab_index--
          if(this.headTab_index <= 0) {
            this.headTab_index = 0
          }
          this.getLeft(this.headTab_index);
          this.switchTab(this.headTab_index)
        }
        if(this.move_x < -100 && this.move_y < 50) {
          this.headTab_index++;
          if(this.headTab_index > this.tab.length-1) {
            this.headTab_index = this.tab.length-1
          }
          this.getLeft(this.headTab_index);
          this.switchTab(this.headTab_index)
        }
        
      },
      // 计算页面头部高度
      computeHeadHeight() {
        this.$getDomInfo(".searchRes_head","height").then((res) => {
          this.head_height = res
        })
      },
      // 计算滚动距离
      getLeft(index) {
        let self = this;
        let class_name = ".item"+index;
        let query = uni.createSelectorQuery().select(class_name);
        query.boundingClientRect((data) => {
          self.scroll_left = data.left * index
         }).exec()
      },
    }
  }
</script>

<style lang="scss" scoped>

.searchRes_page {
  width: 100%;
  transition: all .5s;
  .searchRes_head {
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    /*  #ifdef  H5  */
    top: 88upx;
    /*  #endif  */
    left: 0;
    z-index: 99;
    border-bottom: 1px solid #eee;
    .select_box {
      width: 100%;
      height: 0upx;
      overflow: hidden;
      transition: all .5s;
      .select_item {
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F4F4F4;
        padding: 20upx;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        .item {
          width: 340upx;
          height:52upx;
          background:#F4F4F4;
          border-radius:6upx;
          padding: 0 54upx 0 23upx;
          box-sizing: border-box;
          position: relative;
          >view {
            width: 100%;
            height:100%;
            display: flex;
            align-items: center;
            font-size: 26upx;
            color: #666;
          }
          .source_text {
            overflow: hidden;         
            text-overflow: ellipsis;     
            white-space: nowrap;  
          }
          .iconfont {
            position: absolute;
            top: 50%;
            right: 23upx;
            transform: translateY(-50%);
            font-size: 34upx;
            color: #999;
            transition: all .5s;
          }
        }
        .select_on {
          position: relative;
          &::after {
            content: "";
            width: 100%;
            height: 30upx;
            background: #F4F4F4;
            position: absolute;
            left: 0;
            bottom: -24upx;
          }
          >view {
            color: #0084FF;
          }
          .iconfont {
            transform: translateY(-50%) rotate(180deg);
            color: #0084FF;
          }
        }
      }
      .input_box {
        width: 100%;
        height: 270upx;
        padding: 0 20upx;
        box-sizing: border-box;
        .input_view {
          width: 100%;
          height: 90upx;
          display: flex;
          align-items: center;
          .title {
            width: 150upx;
            font-size: 28upx;
            color: #666;
          }
          .time_box {
            flex: 1;
            height: 90upx;
            padding-left: 6upx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            >view {
              width:220upx;
              height:50upx;
              box-sizing: border-box;
              border-radius:6upx;
              overflow: hidden;
              font-size: 24upx;
              color: #666;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              background: #fff;
              border: 1px solid #eee;
              .close_btn {
                width:46upx;
                height:36upx;
                position: absolute;
                right: 0;
                bottom: 0;
                >view {
                  width: 66upx;
                  height: 100%;
                  position: absolute;
                  bottom: -12upx;
                  right: -24upx;
                  transform: rotate(-45deg);
                  background: #0084FF;
                }
                >text {
                  position: absolute;
                  right: -3upx;
                  bottom: -4upx;
                  font-size: 24upx;
                  color: #fff;
                  transform: scale(0.6)
                }
              }
            }
            .select_date {
              width: 380upx;
              margin-left: 20upx; 
            }
            .on1 {
              border:1px solid #0084FF;
              color: #0084FF;
              background:rgba(240,248,255,1);
            }
          }
          .input_item {
            background: #F4F4F4;
          }
        }
      }
    }
    .select_show {
      height: 370upx;
    }
    .tab_box {
      width: 100%;
      height: 88upx;
      white-space: nowrap;
      .item {
        height: 88upx;
        line-height: 88upx;
        padding: 0 20upx;
        box-sizing: border-box;
        display: inline-block;
        color:#666;
        font-size: 28upx;
        position: relative;
      }
      .tabBar_on {
        &::after {
          bottom: 0;
        }
      }
    }
  }
  .selected_list {
    width: 100%;
    >view {
      width: 33.333%;
      height: 60upx;
      display: inline-block;
      position: relative;
      margin-bottom: 10upx;
      >view {
        width:220upx;
        height:60upx;
        box-sizing: border-box;
        border-radius:6upx;
        overflow: hidden;
        font-size: 26upx;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        .close_btn {
          width:46upx;
          height:36upx;
          position: absolute;
          right: 0;
          bottom: 0;
          >view {
            width: 66upx;
            height: 100%;
            position: absolute;
            bottom: -12upx;
            right: -24upx;
            transform: rotate(-45deg);
            background: #0084FF;
          }
          >text {
            position: absolute;
            right: -3upx;
            bottom: -4upx;
            font-size: 24upx;
            color: #fff;
            transform: scale(0.6)
          }
        }
      }
      .on1 {
        border:1px solid #0084FF;
        color: #0084FF;
        background:rgba(240,248,255,1);
      }
      .on2 {
        color: #ccc;
      }
    }
  }
}
</style>